<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>打印机列表</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/public.css" />-->
	</head>
	<style type="text/css">
		.remove {
			cursor: pointer;
		}
		
		.remove:hover {
			color: red;
		}
		
		.pagination span {
			font: 14px/34px "";
			padding: 0 5px;
		}
		
		.form-control {
			display: inline-block;
			width: 160px;
		}
		
		.header {
			/*border-bottom: 1px solid #fefefe;*/
		}
		
		.header span {
			padding: 0 5px;
		}
		
		.table_cla {
			height: 560px;
		}
	</style>

	<body>
		<div id="app" style="width: 100%; margin: 0 auto;padding:0 20px;">

			<div class="header" style="margin-top: 20px;">
				<input type="text" class="form-control" name="search1" id="search1" value="" v-model="searchmain" placeholder="输入需要查询的内容" />
				<button type="button" class="btn btn-info" data-dismiss="modal" @click="search">搜索</button>
				<button class="btn btn-primary " data-toggle="modal" data-target="#myModal">增加</button>
			</div>
			<div class="table_cla">
				<table class="table">
					<caption >打印机列表</caption>
					<thead>
						<tr>
							<th>物业</th>
							<th>小区</th>
							<th>创建时间</th>
							<th>创建人</th>
							<th>打印机名称</th>
							<th>打印机编号</th>
							<th>删除</th>
						</tr>
					</thead>
					<tbody v-for="(tt,index) in table">
						<tr>
							<td v-text="tt.organizename"></td>
							<td v-text="tt.areaname"></td>
							<td v-text="tt.createdate"></td>
							<td v-text="tt.createusername"></td>
							<td v-text="tt.printername"></td>
							<td v-text="tt.printersn"></td>
							<td @click="remove($event)" data-toggle="modal" data-target="#myModalremove" class="remove">
								<span v-if="panduan" class="glyphicon glyphicon-trash"></span>
								<span class="hanyouid" style="display: none;" v-text="tt.printerid"></span>
							</td>
						</tr>

					</tbody>
				</table>

			</div>
			<ul class="pagination">
				<span v-text="count_all"></span>
				<!--<li v-show="current != 1" @click="current-- && goto(current--)">
					<a href="#">上一页</a>
				</li>-->
				<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
					<a href="#" v-text="index"></a>
				</li>
				<!--<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
					<a href="#">下一页</a>
				</li>-->
				<span>跳到:</span>
				<!--<input style="width: 50px;height: 34px;" min="1" max="{{allpage}}" type="number" name="goto" id="goto" v-model="jump" />-->
				<input style="width: 50px;height: 28px;" name="goto" id="goto" v-model="jump" type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
				<span>页</span>
				<!--<input type="button" id="gotoo" value="确定" @click="goto(jump)" />-->
				<button type="button" id="gotoo" @click="goto(jump)" class="btn btn-danger ">确定 </button>
			</ul>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModalremove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">是否确认删除</h4>
						</div>
						<div class="modal-body">删除后数据无法找回</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-danger remove" @click="sureremove">确定删除</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
							</button>
							<h4 class="modal-title" id="myModalLabel">
								添加打印机
							</h4>
						</div>
						<div class="modal-body">
							<div>
								<form class="bs-example bs-example-form" role="form">
									<!--<div class="input-group">
										<span class="input-group-addon">选择物业</span>									

										<select class="form-control" v-model="wuye1" name="wuye" id="wuye">
											<option v-for="(item,index) in wuye" :value="item.organizeid">{{ item.shortname }}</option>
										</select>

									</div>
									<br>
									<div class="input-group">
										<span class="input-group-addon">选择小区</span>
										<select class="form-control" v-model="xiaoqu1" name="xiaoqu" id="xiaoqu">
											<option v-for="(item,index) in xiaoqu" :value="item.areaid">{{ item.areaname }}</option>
										</select>
									</div>
									<br>-->
									<div class="input-group">
										<span class="input-group-addon">打印机名字</span>
										<input type="text" v-model="pri_name" class="form-control" placeholder="请输入打印机名字">
									</div>
									<br>
									<div class="input-group">
										<span class="input-group-addon">打印机秘钥</span>
										<input type="text" v-model="pri_miyao" class="form-control" placeholder="请输入打印机背面的秘钥">
									</div>
									<br>
									<div class="input-group">
										<span class="input-group-addon">打印机编号</span>
										<input type="text" v-model="pri_biaohao" class="form-control" placeholder="请输入打印机标号">
									</div>
									<br>
								</form>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" @click="sure_add_Printer">
								提交更改
							</button>
						</div>
					</div>

				</div>

			</div>
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script>
	//	var urlr = "http://192.168.0.30:8085"
	new Vue({
		el: '#app',
		data: {
			urlr: "",
			xiaoqu1: "",
			wuye1: "",
			panduan: "",
			searchmain: "",
			current: 1,
			showItem: 5,
			allpage: "",
			jump: "",
			removeid: "",
			pri_name: "",
			pri_miyao: "",
			pri_biaohao: "",
			tips_modal: "",
			count_all: "",
			table: [{

			}],
			wuye: [{
				shortname: '请选择物业',
				organizeid: "000"
			}],
			xiaoqu: [{
				areaname: '请选择小区',
				areaid: "000"
			}],
			merchantid: "",
			areaid: '',
			userid: "",
			realname: ''
		},
		created: function() {
			var aa = getUrl();
			this.urlr = aa;
			var that = this;
			//设置初始默认选中
			this.xiaoqu1 = this.xiaoqu[0].areaid;
			this.wuye1 = this.wuye[0].organizeid;
		},
		mounted: function() {
			//获取url中的参数			
			var userid = this.getUrlParam('userid');
			var createusername = this.getUrlParam('realname');
			var merchantid = this.getUrlParam('merchantid');
			var areaid = this.getUrlParam('areaid');
			if(userid == null || userid == '') {
				//				alert("用户id不能为空")
				this.tips_modal = "用户id不能为空";
				$('#myModal_tips').modal('show');
				return;
			} else {
				this.userid = userid
			}
			if(createusername == null || createusername == '') {
				//				alert("用户姓名不能为空")
				this.tips_modal = "用户姓名不能为空";
				$('#myModal_tips').modal('show');
				return;
			} else {
				this.realname = createusername
			}
			if(areaid == null || areaid == '') {
				//				alert("小区id不能为空")
				this.tips_modal = "小区id不能为空";
				$('#myModal_tips').modal('show');
				return;
			} else {
				this.areaid = areaid
			}
			if(merchantid == null || merchantid == '') {
				//				alert("物业id不能为空")
				this.tips_modal = "物业id不能为空";
				$('#myModal_tips').modal('show');
				return;
			} else {
				this.merchantid = merchantid;
			}
			var datainit = {
				"selectinfo": null,
				"pagenumber": 1,
				"pagesize": 10,
				"organizeid": this.merchantid,
				"areaid": this.areaid
			}
			this.jiazai(datainit);
		},
		computed: {
			pages: function() {
				var pag = [];
				if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
					//总页数和要显示的条数那个大就显示多少条
					var i = Math.min(this.showItem, this.allpage);
					while(i) {
						pag.unshift(i--);
					}
				} else { //当前页数大于显示页数了
					var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
						i = this.showItem;
					if(middle > (this.allpage - this.showItem)) {
						middle = (this.allpage - this.showItem) + 1
					}
					while(i--) {
						pag.push(middle++);
					}
				}
				return pag
			}
		},
		methods: {
			//获取url
			getUrlParam: function(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if(r != null) return decodeURI(r[2]);
				return null; //返回参数值
			},
			//加载物业
			//			get_wuye: function() {
			//				var that = this;
			//				that.xiaoqu = [{
			//					areaname: '请选择小区',
			//					areaid: "000"
			//				}];
			//				//获取物业公司
			//				$.ajax({
			//					contentType: "application/json; charset=utf-8",
			//					type: "POST",
			//					url: that.urlr + "/public/selectOrganizeNameList",
			//					data: "",
			//					async: true,
			//					dataType: "json",
			//					success: function(msg) {
			//						console.log(msg);
			//						if(msg.code == 200) {
			//							var aa = JSON.parse(msg.returnString);
			//
			//							var te = {
			//								shortname: '请选择物业',
			//								organizeid: "000"
			//							}
			//							aa.unshift(te);
			//							console.log(aa);
			//							that.wuye = aa;
			//							that.wuye1 = that.wuye[0].organizeid;
			//						} else {
			//							alert(msg.disp)
			//						}
			//					},
			//					error: function() {
			//						alert("获取信息失败");
			//					}
			//				});
			//			},
			//物业改变出现小区
			//			changeWuye: function() {
			//				var that = this;
			//				var wuyee = this.wuye1;
			//				console.log(wuyee);
			//				var data = {
			//					"parentid": wuyee
			//				}
			//				var data = JSON.stringify(data)
			//				$.ajax({
			//					contentType: "application/json; charset=utf-8",
			//					type: "POST",
			//					url: that.urlr + "/public/selectPropertyCommunityList",
			//					data: data,
			//					async: true,
			//					dataType: "json",
			//					success: function(msg) {
			//						console.log(msg);
			//						if(msg.code == 200) {
			//							var aa = JSON.parse(msg.returnString);
			//							var te = {
			//								areaname: '请选择小区',
			//								areaid: "000"
			//							}
			//							aa.unshift(te);
			//							console.log(aa);
			//							console.log(that);
			//
			//							that.xiaoqu = aa;
			//							that.xiaoqu1 = that.xiaoqu[0].areaid;
			//							//							that.xiaoqu1 = that.xiaoqu[0].organizeid;
			//						} else {
			//							alert(msg.disp)
			//						}
			//					},
			//					error: function() {
			//						alert("获取信息失败");
			//					}
			//				});
			//			},
			//增加
			sure_add_Printer: function() {
				var that = this;
				if(that.pri_miyao == "" || that.pri_biaohao == "" || that.pri_name == "") {
					//					alert("请确认信息完整")
					that.tips_modal = "请确认信息完整后在提交";
					$('#myModal_tips').modal('show');
				} else {
					var data = {
						"areaid": that.areaid,
						"createuserid": that.userid,
						"createusername": that.realname,
						"organizeid": that.merchantid,
						"printerkey": that.pri_miyao,
						"printersn": that.pri_biaohao,
						"printername": that.pri_name,
					}
					var data = JSON.stringify(data);
					$.ajax({
						contentType: "application/json; charset=utf-8",
						type: "POST",
						url: that.urlr + "/printer/addPrinter",
						data: data,
						async: true,
						dataType: "json",
						success: function(msg) {
							//							console.log(msg);
							if(msg.code == 200) {
								//							debugger
								//								alert("添加成功");
								$('#myModal').modal('hide');
								that.tips_modal = "添加成功";
								$('#myModal_tips').modal('show');
								var datainit = {
									"selectinfo": null,

									"pagenumber": 1,
									"pagesize": 10,
									"organizeid": that.merchantid,
									"areaid": that.areaid
								}
								that.jiazai(datainit);
							} else {
								//								alert(msg.disp)
								that.tips_modal = msg.disp;
								$('#myModal_tips').modal('show');
							}
						},
						error: function() {
							//							alert("获取信息失败");
							that.tips_modal = "获取信息失败";
							$('#myModal_tips').modal('show');
						}
					});
				}

			},
			remove: function($event) {
				var this1 = $event.currentTarget;
				var sss = this1.children[1].innerHTML;
				this.removeid = sss;
				//				console.log(this.removeid)
			},
			//加载数据
			jiazai: function(e) {
				//								debugger
				//				console.log(e)
				var data = JSON.stringify(e);
				var that = this;
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/printer/selectPrinterList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						//						console.log(msg);
						if(msg.code == 200) {
							//							debugger
							var aa = JSON.parse(msg.returnString);
							//							console.log(msg.count);
							that.table = aa;
							if(that.table.length > 0) {
								that.panduan = true;
							} else {
								that.panduan = false;
							}
							that.count_all = "共" + msg.count + "条";
							var yu = msg.count % 10;
							if(yu == 0) {
								that.allpage = parseInt(msg.count / 10);
							} else {
								that.allpage = parseInt(msg.count / 10) + 1;
							}

							//							console.log(that.allpage)
							//							console.log(that)
							//							that.wuye1 = that.wuye[0].organizeid;
						} else {
							//							alert(msg.disp)
							that.tips_modal = msg.disp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});

			},

			sureremove: function() {
				//				debugger
				var that = this;
				var aa = that.removeid;
				var data = {
					"printerid": aa
				}
				data = JSON.stringify(data);
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/printer/deletePrinter",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						//						console.log(msg);
						if(msg.code == 200) {
							//							alert("");
							that.tips_modal = "删除成功";
							$('#myModal_tips').modal('show');
							$('#myModalremove').modal('hide');
							var datainit = {
								"selectinfo": that.searchmain,
								"pagenumber": 1,
								"pagesize": 10,
								"organizeid": that.merchantid,
								"areaid": that.areaid
							}
							that.jiazai(datainit);
						} else {
							//							alert(msg.disp)
							that.tips_modal = msg.disp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			goto: function(index) {
				if(index == this.current) return;
				if(index > this.allpage) {
					return
				}
				//				debugger
				var re = /^[1-9]+[0-9]*]*$/ //判断正整数      // /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字  
				if(!re.test(index)) {
					return false;
				}
				this.current = index;
				//				console.log(index)
				//				alert("去请求吧")
				var datainit = {
					"selectinfo": that.searchmain,

					"pagenumber": index,
					"pagesize": 10,
					"organizeid": that.merchantid,
					"areaid": that.areaid
				}
				this.jiazai(datainit);
				//这里可以发送ajax请求
			},
			search: function() {
				var that = this;
				var datainit = {
					"pagenumber": 1,
					"pagesize": 10,
					"organizeid": that.merchantid,
					"areaid": that.areaid,
					"selectinfo": that.searchmain,
				}
				that.jiazai(datainit);
			},
			
		},

	})
</script>